<template>
  <div class="auth-wrap">

    <div class="auth-info">
      <div class="auth-img">
        <image-view
          src="https://www.youbaobao.xyz/mpvue-res/logo.jpg"
          round
        ></image-view>
      </div>
      <div class="sub-title">登录小慕读书</div>
      <div class="title">全场好书免费读</div>

      <button class="auth-btn"
              open-type="getUserInfo"
              @getuserinfo="getUserInfo"
      >授权登录</button>

    </div>

  </div>
</template>

<script>
  import ImageView from './ImageView.vue';
  export default {
    name: "Auth",
    components : {
      ImageView
    },
    methods : {
      getUserInfo(){
        this.$emit('getUserInfo');
      },
    },
  };
</script>

<style lang="less" scoped>
  .auth-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #999999;
    z-index: 50;
    .auth-info{
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 270px;
      height: 248px;
      background: #F5F5F5;
      border-radius: 20px;
      .auth-img{
        margin: 22.5px 0 18px 0;
        width: 74px;
        height: 74px;
      }
      .sub-title{
        line-height: 18.5px;
        font-size: 13px;
        color: #999999;
      }
      .title{
        line-height: 22.5px;
        font-size: 16px;
        color: #333333;
      }
    }
    .auth-btn{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 49px;
      line-height: 49px;
      background-image: linear-gradient(90deg, #1EA3F5 0%, #0F87FC 100%);
      border-radius: 0 0 20px 20px;
      font-size: 15px;
      color: #fff;
      text-align: center;
    }
  }
</style>
